<template>
  <div class="result-panel">
    <template v-if="normalizedResults.length">
      <div class="results-header">
        <h4>📝 审计结果明细</h4>
        <div class="results-count">发现 <span>{{ normalizedResults.length }}</span> 个问题</div>
      </div>
      
      <div class="result-cards">
        <div v-for="(item, index) in normalizedResults" :key="item.id || index" 
             class="result-card" 
             :class="`severity-${item.severityClass}`">
          <div class="card-header">
            <div class="card-index">#{{ index + 1 }}</div>
            <span class="severity-badge" :class="item.severityClass">
              {{ item.severityIcon }} {{ item.severityLabel }}
            </span>
          </div>
          
          <div class="card-body">
            <div class="vulnerability-type">
              <span class="type-icon">🔍</span>
              <strong>{{ item.type }}</strong>
            </div>
            
            <div class="file-location">
              <span class="location-icon">📁</span>
              <code class="file-path">{{ item.fileDisplay }}</code>
            </div>
            
            <div v-if="item.description" class="description">
              <div class="section-title">💬 问题描述</div>
              <p>{{ item.description }}</p>
            </div>
            
            <div v-if="item.snippet" class="code-section">
              <div class="section-title">💻 代码片段</div>
              <details class="code-details">
                <summary>点击查看代码</summary>
                <pre class="code-block"><code>{{ item.snippet }}</code></pre>
              </details>
            </div>
            
            <div v-if="item.fix" class="fix-section">
              <div class="section-title">✅ 修复建议</div>
              <details class="fix-details">
                <summary>点击查看修复方案</summary>
                <pre class="fix-block"><code>{{ item.fix }}</code></pre>
              </details>
            </div>
          </div>
        </div>
      </div>
    </template>
    <div v-else class="empty-state">
      <div class="empty-icon">📦</div>
      <p class="empty-text">暂未生成任何审计结果</p>
      <p class="empty-hint">上传代码并开始审计后，结果将显示在这里</p>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  results: {
    type: Array,
    default: () => []
  }
})

const severityMeta = {
  critical: { label: '危急', class: 'critical', icon: '🔥' },
  high: { label: '高危', class: 'high', icon: '⚠️' },
  medium: { label: '中危', class: 'medium', icon: '🟡' },
  low: { label: '低危', class: 'low', icon: '✅' },
  info: { label: '提示', class: 'info', icon: '💬' }
}

const normalizedResults = computed(() => {
  return (props.results || []).map((item = {}, index) => {
    const severityKey = String(item.severity || 'medium').toLowerCase()
    const severity = severityMeta[severityKey] || severityMeta.medium
    const filePath = item.file || '未知文件'
    const lineNumber = Number.isFinite(Number(item.line)) && Number(item.line) > 0
      ? `:${Number(item.line)}`
      : ''

    return {
      id: item.id ?? index,
      type: item.type || '未知类型',
      severityLabel: severity.label,
      severityClass: severity.class,
      severityIcon: severity.icon,
      fileDisplay: `${filePath}${lineNumber}`,
      description: item.description,
      snippet: item.snippet,
      fix: item.fix
    }
  })
})
</script>

<style scoped>
.result-panel {
  width: 100%;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e5e7eb;
}

.results-header h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}

.results-count {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.results-count span {
  font-size: 18px;
  font-weight: 700;
  color: #ef4444;
  margin: 0 4px;
}

.result-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.result-card {
  background: #ffffff;
  border-radius: 16px;
  border: 2px solid #e5e7eb;
  border-left-width: 6px;
  padding: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.result-card:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.result-card.severity-critical {
  border-left-color: #ef4444;
  background: linear-gradient(to right, #fef2f2 0%, #ffffff 5%);
}

.result-card.severity-high {
  border-left-color: #f97316;
  background: linear-gradient(to right, #fff7ed 0%, #ffffff 5%);
}

.result-card.severity-medium {
  border-left-color: #eab308;
  background: linear-gradient(to right, #fefce8 0%, #ffffff 5%);
}

.result-card.severity-low {
  border-left-color: #22c55e;
  background: linear-gradient(to right, #f0fdf4 0%, #ffffff 5%);
}

.result-card.severity-info {
  border-left-color: #3b82f6;
  background: linear-gradient(to right, #eff6ff 0%, #ffffff 5%);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-index {
  font-size: 18px;
  font-weight: 700;
  color: #9ca3af;
  font-family: 'JetBrains Mono', monospace;
}

.severity-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.severity-badge.critical { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.severity-badge.high { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }
.severity-badge.medium { background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); }
.severity-badge.low { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.severity-badge.info { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }

.card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vulnerability-type {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #111827;
}

.type-icon {
  font-size: 18px;
}

.file-location {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.location-icon {
  font-size: 16px;
}

.file-path {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 13px;
  color: #1f2937;
  background: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  flex: 1;
  overflow-x: auto;
  white-space: nowrap;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.description p {
  margin: 0;
  color: #4b5563;
  line-height: 1.6;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border-left: 3px solid #3b82f6;
}

.code-details,
.fix-details {
  margin-top: 8px;
}

.code-details summary,
.fix-details summary {
  cursor: pointer;
  padding: 10px 14px;
  background: #f3f4f6;
  border-radius: 8px;
  color: #2563eb;
  font-weight: 600;
  transition: all 0.2s ease;
  user-select: none;
  display: inline-block;
}

.code-details summary:hover,
.fix-details summary:hover {
  background: #e5e7eb;
  color: #1d4ed8;
}

.code-block,
.fix-block {
  margin: 12px 0 0;
  padding: 16px;
  background: #1e293b;
  border-radius: 10px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #e2e8f0;
  overflow-x: auto;
  border: 1px solid #334155;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

.code-block code,
.fix-block code {
  color: inherit;
  background: none;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-text {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.empty-hint {
  margin: 0;
  font-size: 14px;
  color: #9ca3af;
}

@media (max-width: 768px) {
  .result-card {
    padding: 16px;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .file-path {
    font-size: 12px;
  }
}
</style>